<script setup>
import { Search, Plus, Minus } from "@element-plus/icons-vue";
// import { useStore } from "vuex";
import MdEditor from "md-editor-v3"; //引入markdown
import "md-editor-v3/lib/style.css";
import { ref, reactive, computed } from "vue";

// vuex
// const store = useStore();
// store.dispatch("course/getList");
//表格
// const list = computed(() => store.state.course.list);
const list = reactive([]);

// 搜索
const inputVal = ref("");

// 表单
const form = reactive({
  campus: [],
});

/**
 * 表单校验
 */
const rules = reactive({
  number: [
    {
      required: true,
      message: "编号不能为空",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "课程名称不能为空",
      trigger: "change",
    },
  ],
  campus: [
    {
      type: "array",
      required: true,
      message: "至少选择一个校区",
      trigger: "change",
    },
  ],
  grade: [
    {
      required: true,
      message: "请选择一个年级",
      trigger: "change",
    },
  ],
  term: [
    {
      required: true,
      message: "请选择您的学期",
      trigger: "change",
    },
  ],
  price: [
    {
      required: true,
      message: "价格不能为空",
      trigger: "change",
    },
  ],
  places: [
    {
      required: true,
      message: "名额至少填写一人",
      trigger: "blur",
    },
  ],
  subject: [
    {
      required: true,
      message: "请选择您的学科",
      trigger: "blur",
    },
  ],
  home: [
    {
      required: true,
      message: "请选择是否推荐到首页",
      trigger: "blur",
    },
  ],
  kaike: [
    {
      required: true,
      message: "请选择是否立即开课",
      trigger: "blur",
    },
  ],
  startTime: [
    {
      type: "date",
      required: true,
      message: "请选择开始时间",
      trigger: "change",
    },
  ],
  finishTime: [
    {
      type: "date",
      required: true,
      message: "请选择结束时间",
      trigger: "change",
    },
  ],
  hour: [
    {
      required: true,
      message: "请填写课时",
      trigger: "change",
    },
  ],
  introduce: [
    {
      required: true,
      message: "请填写课时介绍",
      trigger: "change",
    },
  ],

  //
});
// 表单ref
const formRef = ref({});
// 抽屉的开关
const drawer = ref(false);

//  分页当前页
const currentPage = ref(1);

// 点击+的时候
const items = reactive([""]);

// 一页几条
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
// 当前第几页
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};
// 点击+的时候增加一个
const addInput = () => {
  items.push("");
};
// 点击-的时候减去一个
const minusInput = () => {
  items.pop();
};

/**
 * 控制抽屉开关
 */

const hasDrawer = () => {
  drawer.value = !drawer.value;
};

/**
 * 新增
 */

const onSubmit = (formRef) => {
  formRef.validate(async (valid) => {
    if (!valid) {
      console.log("失败");
      return false;
    } else {
      console.log("成功");
      // await store.dispatch("course/addList", form);
      hasDrawer();
      // store.dispatch("course/getList");
    }
  });
};
</script>



<template>
  <el-row>
    <el-col :span="5">
      <el-input v-model="inputVal" placeholder="请输入标题或关键字" />
    </el-col>
    <el-col :span="15" :offset="1">
      <span>上传时间：</span>
      <el-date-picker type="date" placeholder="开始时间"> </el-date-picker>
      <span style="padding: 0 10px">-</span>
      <el-date-picker type="date" placeholder="结束时间"> </el-date-picker>
      <el-button type="primary" style="margin-left: 18px">筛选</el-button>
    </el-col>
    <el-col :span="3">
      <el-button type="success" @click="hasDrawer">新增课程</el-button>
    </el-col>
  </el-row>

  <!--  table表格 -->
  <el-table :data="list" border style="width: 100%; margin-top: 20px">
    <el-table-column type="selection" width="150" />
    <el-table-column prop="number" label="课程编号" width="180" />
    <el-table-column prop="name" label="课程名称" width="180" />
    <el-table-column prop="campus" label="校区" />
    <el-table-column prop="grade" label="年级" width="180" />
    <el-table-column prop="term" label="学期" width="180" />
    <el-table-column prop="price" label="价格" />
    <el-table-column prop="places" label="名额" />
    <el-table-column prop="placesNum" label="报名人数" />
    <el-table-column prop="subject" label="学科" />
    <el-table-column prop="putaway" label="状态" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default>
        <el-button type="text" size="small">编辑</el-button>
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->

  <el-pagination
    style="margin-top: 20px"
    v-model:currentPage="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="10"
    layout="total, sizes, prev, pager, next, jumper"
    :total="95"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>

  <!--弹出框form -->
  <el-drawer
    v-model="drawer"
    title="新增"
    :close-on-click-modal="false"
    size="43%"
  >
    <el-form ref="formRef" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="课程编号" prop="number">
        <el-input v-model="form.number"></el-input>
      </el-form-item>
      <el-form-item label="课程名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="列表图">
        <el-upload
          class="avatar-uploader"
          action=""
          v-model="form.avatar"
          :show-file-list="false"
        >
          <img class="avatar" />
          <el-icon class="avatar-uploader-icon"><plus /></el-icon>
        </el-upload>
        <!-- <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
        </el-upload> -->
      </el-form-item>
      <el-form-item label="校区" prop="campus">
        <el-checkbox-group v-model="form.campus">
          <el-checkbox label="海淀校区" name="0"></el-checkbox>
          <el-checkbox label="朝阳校区" name="1"></el-checkbox>
          <el-checkbox label="西城校区" name="2"></el-checkbox>
          <el-checkbox label="东城校区" name="3"></el-checkbox>
          <el-checkbox label="石景山校区" name="4"></el-checkbox>
          <el-checkbox label="丰台校区" name="5"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="年级" prop="grade">
        <el-select v-model="form.grade" placeholder="请选择年纪">
          <el-option label="一年级" value="1"></el-option>
          <el-option label="二年级" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="学期" prop="term">
        <el-select v-model="form.term" placeholder="请选择学期">
          <el-option label="一学期" value="0"></el-option>
          <el-option label="二学期" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="价格" prop="price">
        <el-input
          v-model="form.price"
          placeholder="0.00"
          style="width: 94px"
        ></el-input>
        <span class="cs_test">元</span>
      </el-form-item>

      <el-form-item label="名额" prop="places">
        <el-input
          v-model="form.places"
          placeholder="0"
          style="width: 94px"
        ></el-input>
        <span class="cs_test">人</span>
      </el-form-item>

      <el-form-item label="学科" prop="subject">
        <el-select v-model="form.subject" placeholder="请选择学科">
          <el-option label="数学" value="shanghai"></el-option>
          <el-option label="语文" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否上架" prop="putaway">
        <el-switch v-model="form.putaway"></el-switch>
      </el-form-item>

      <el-form-item label="是否推荐首页" prop="home">
        <el-radio-group v-model="form.home">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否立即开课" prop="kaike">
        <el-radio-group v-model="form.kaike">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="课程日期" prop="startTime">
        <el-col :span="8">
          <el-date-picker
            v-model="form.startTime"
            type="date"
            placeholder="开始时间"
          ></el-date-picker>
        </el-col>
        <el-col :span="1" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-form-item prop="finishTime">
          <el-col :span="8">
            <el-date-picker
              v-model="form.finishTime"
              type="date"
              placeholder="结束时间"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form-item>

      <el-form-item label="课时" prop="hour">
        <el-input
          v-model="form.hour"
          placeholder="0"
          style="width: 94px"
        ></el-input>
      </el-form-item>

      <el-form-item label="课程介绍" prop="introduce">
        <!-- markdown -->
        <md-editor v-model="form.introduce" />
      </el-form-item>

      <el-form-item label="课程大纲" class="inputWid">
        <div v-for="(item, i) in items" :key="i">
          <span>第{{ i + 1 }}讲</span>
          <el-input
            style="width: 200px; margin: 25px 0 0 6px"
            v-model="items[i]"
          ></el-input>
        </div>
        <el-icon @click="addInput" class="cs_icon"><plus /></el-icon>
        <el-icon @click="minusInput" class="cs_icon" v-if="items.length > 1"
          ><minus
        /></el-icon>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit(formRef)">提交</el-button>
        <el-button @click="hasDrawer">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
  

<style scoped>
.cs_test {
  margin-left: 10px;
}
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 178px;
  text-align: center;
}
.cs_icon {
  margin: 25px 5px 0 0;
}
.inputWid {
  width: 450px;
}
</style>
